<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"/>
     <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll">
      <div>{{$store.state.cartList.length}}</div>
    <detail-swiper :top-images="topImages"/>
      <detail-base-info :goods="goods"></detail-base-info>
      <!-- 商店展示 -->
      <detail-shop-info :shop="shop"></detail-shop-info> 
    <DetailGoodsInfo class="detailInfo"  :detailInfo="detailInfo" @imageLoad="imageLoad"/>
    <DetailParamInfo ref="params" :paramInfo="paramInfo"/>
    <DetailCommentInfo ref="comment" :comment-info="commentInfo"/>
    <GoodsListVue ref="recommend" :goods="recommends"/>
   
    </scroll>
     <back-top @click.native="backClick" v-show="isShowBackTop"/>
    <DetailBottomBar @addCart="addToCart"/>
    <ToastVue :message="message" :show="show"/>

  </div>
</template>


<script>
//头部
// import NavBar from '@/components/common/navbar/NavBar.vue'
import { getDetail, Goods, Shop, GoodsParam, getRecommend } from 'network/detail';
import DetailNavBar from './childComps/DetailNavBar.vue'
import DetailSwiper from './childComps/DetailSwiper.vue'
import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
import DetailShopInfo from './childComps/DetailShopInfo.vue'
import Scroll from "components/common/scroll/Vscroll"
import DetailGoodsInfo from "./childComps/DetailGoodsinfo.vue"
import DetailParamInfo from './childComps/DetailParamInfo.vue'
import DetailCommentInfo from './childComps/DetailCommentInfo.vue'
import GoodsListVue from '@/components/content/goods/GoodsList.vue';
import {debounce} from "common/utils";
import DetailBottomBar from "./childComps/DetailBottomBar.vue"
import BackTop from 'components/content/backTop/BackTop'
import {BACK_POSITION} from "common/const"
import ToastVue from '@/components/common/toast/Toast.vue';
export default {
 name:'DetailItem',
 components:{
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    Scroll,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    GoodsListVue,
    DetailBottomBar,
    BackTop,
    ToastVue,
    

},
 data(){
    return {
        iid: null,
        //顶部图片的轮播数据
        topImages:[],
        goods:{},
        shop:{},
        detailInfo:{},
        paramInfo:{},
        itemParams:{},
        commentInfo:{},
        recommends: [],
        themeTopYs: [0, 1000, 2000, 3000],
        isShowBackTop: false,
        message:'',
        show:false
    }
 },
 methods:{
  imageLoad(){
    this.$refs.scroll.refresh()
  },
  titleClick(index){
    console.log('232323323',index);
    this.$refs.scroll.scrollTo(0, this.themeTopYs[index], 200)
  },
  //获取y值 滑动显示
  contentScroll(position){
    console.log(position);
    const positionY = position.y
    for(let i =0; i< length; i++){
      
      if(this.currentIndex !== i && ((i <length - 1 && positionY >= this.themeTopYs[i]
       && positionY < this.themeTopYs[i +1] || (i === length - 1 && positionY >= this.themeTopYs[i])))){
       this.currentIndex = i;
       console.log(this.currentIndex);
       //传递数值
       this.$refs.nav.currentIndex = this.currentIndex
      }
      
      }
      //3.是否显示回到顶部
      this.isShowBackTop = position.y >BACK_POSITION
    },
    backTop(){
      this.$refs.scroll.scrollTo(0, 0, 300)
    },
    //监听addCart事件
    addToCart(){
      //在此处加入购物车
      console.log('-----1212');
      const product ={}
      product.image = this.topImages[0]; //图片展示
      product.title = this.goods.title;//名称
      product.desc = this.goods.desc; //备注
      product.price = this.goods.newPrice; //价格
      product.iid = this.goods.iid //商品iid

      //将商品添加到购物车  设置添加的时间
      // this.$store.cartList.push(product);
      this.$store.commit('addCart',product);
     

    }

 },
 created(){
    //1.保存传入的iid
    console.log(this.$route.params.iid);
    this.iid = this.$route.params.iid
    //2.根据iid请求详情数据
    getDetail(this.iid).then(res =>{
        console.log(res);
        console.log(res.result.itemInfo.topImages);
        //1.获取顶部图片的轮播数据
        const data = res.result
        this.topImages = data.itemInfo.topImages
        //2.获取商品信息
        this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
        //3.创建商品信息的对象
        this.shop = new Shop(data.shopInfo)
        //4.保存商品的详细数据
        this.detailInfo = data.detailInfo
        //5.获取商品的参数信息
        this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)
        //6.取出参数信息
        this.itemParams = data.itemParams
        // 7.取出评论信息 先判断是否为空
        if(data.rate.cRate !== 0){
          this.commentInfo = data.rate.list[0] //先取出一条评论
        } 

    })
    //3.获取推荐信息
     getRecommend().then(res=>{
      console.log(res.data.list,'3444444');
      this.recommends = res.data.list
    })
    //
    this.getThemTopY = debounce(() =>{
        this.themeTopYs = []
    this.themeTopYs.push(0);//商品
    this.themeTopYs.push(this.$refs.params.$el.offsetTop);//参数
    this.themeTopYs.push(this.$refs.comment.$el.offsetTop); //评论
    this.themeTopYs.push(this.$refs.recommend.$el.offsetTop); //推荐
    console.log(this.themeTopYs);
    })


 },
 //事件的挂载
 mounted(){

 },
 //获取对应的位置属性
 updated(){
  // this.themeTopYs = []
  // this.themeTopYs.push(0);//商品
  // this.themeTopYs.push(this.$refs.params.$el.offsetTop);//参数
  // this.themeTopYs.push(this.$refs.comment.$el.offsetTop); //评论
  // this.themeTopYs.push(this.$refs.recommend.$el.offsetTop); //推荐
  // console.log(this.themeTopYs);
 }
}
</script>

<style>
 #detail {
    position: relative;
    z-index: 9;
    background-color: #fff;
    height: 100vh;
  }
  .detail-nav {
    position: relative;
    z-index: 9;
    background-color: #fff;
  }
  .detailInfo{
    position: relative;
  }
  .content {
    background-color: #fff;
    height: calc(100% - 44px - 49px);
  }
</style>